<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap 101 Template</title>

  <!-- Bootstrap -->
  <link href="./lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  <style>
    .wrap {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: url('images/bg03.jpg') center bottom no-repeat;
      overflow: auto;
    }

    .navbar-brand {
      padding: 10px 15px;
    }

    .logout {
      font-weight: 900;
      font-size: 20px;
      color: #ff0000;
      text-decoration: none;
    }

    .logout:hover {
      text-decoration: none;
      color: yellowgreen;
    }

    #my-table th {
      text-align: center;
    }

    #my-table td {
      text-align: center;
      line-height: 80px;
      padding: 0;
      padding: 10px;
    }

    td img {
      width: 80px;
      height: 80px;
    }

    .username {
      font-weight: 900;
      color: hotpink;
      background-color: yellowgreen;
    }

    .pagination {
      margin: 0px;
      padding: 0px;
      font-size: 0;
      line-height: 1;
    }

    .pagination li {
      display: inline-block;
      font-size: 14px;
    }

    .mp15 {
      margin-top: 15px;
    }

    .table {
      margin-bottom: 0;
    }

    .table-bordered>thead>tr>td,
    .table-bordered>thead>tr>th {
      border-bottom-width: 1px;
    }

    .page-title {
      font-size: 16px;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <nav class="navbar  navbar-inverse navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mymenu">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="images/logo.png"></a>
        </div>
      </div>
    </nav>

    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <div class="row">
                <div class="col-md-6 page-title">英雄列表</div>
                <div class="col-md-6 text-right">当前位置：首页</div>
              </div>
            </div>
            <div class="panel-body">
              <!-- action 不写 就是当前页面 method 不写 就是 get -->
              <div class="row">
                <div class="col-md-9">
                </div>
                <div class="col-md-3">
                  <a href="./add.html" class="btn btn-success pull-right">新增</a>
                </div>

              </div>

              <table id="my-table" class="table table-bordered mp15">
                <thead>
                  <tr>
                    <th width="25%">头像</th>
                    <th width="25%">姓名</th>
                    <th width="25%">技能</th>
                    <th width="25%">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <!-- <tr>
                    <td><img src="./lib/img/盖伦.png" alt="" /></td>
                    <td>盖伦</td>
                    <td>躲草丛</td>
                    <td>
                      <a href="./edit.html" class="btn btn-primary btn-edit">编辑</a>
                      <a class="btn btn-danger btn-delete">删除</a>
                    </td>
                  </tr> -->
                </tbody>
              </table>
            </div>
            <div class="panel-footer text-center">

            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 模板 -->
  <script type="text/html" id="cq">
    {{each data v}}
    <tr>
      <td><img src="./uploads/{{v.icon}}" alt="" /></td>
      <td>{{v.name}}</td>
      <td>{{v.skill}}</td>
      <td>
        <a href="./edit.html?id={{v.id}}" data-id="{{v.id}}" class="btn btn-primary btn-edit">编辑</a>
        <a data-id="{{v.id}}" class="btn btn-danger btn-delete">删除</a>
      </td>
    </tr>
    {{/each }}
  </script>

  <script src="./lib/bootstrap/js/jquery-1.12.4.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="./lib/bootstrap/js/bootstrap.min.js"></script>
  <!--导入模板引擎 -->
  <script src="./lib/js/template-web.js"></script>


</body>
<script>
  $(function () {

    loadList();

    // 删除  分析:1.获取删除按钮, 注册点击事件  2.获取要删除数据的id值  3.发送删除请求,删除成功后将该条数据移除
    $('tbody').on('click', '.btn-danger', function () {
      //获取id值
      let id = $(this).attr('data-id');

      if (confirm('是否删除该条数据')) {
        $.ajax({
          url: '/delete',
          method: 'post',
          dataType: 'json',
          data: {
            id: id
          },
          success: (backData)=>{

            if (backData.code == 202) {
              alert('删除成功')
              $(this).parents('tr').remove()
            }
          }
        });
      }


    })


  })

  function loadList() {
    //发送英雄列表的请求
    $.ajax({
      url: '/list',
      method: 'get',
      dataType: 'json',
      success: function (backData) {
        // console.log(backData);

        if (backData.code == 200) {
          let htmlStr = template('cq', backData);
          $('#my-table tbody').html(htmlStr)
        }
      }
    });
  }
</script>



</html>